<template>
    <el-row class="m-adManage">
        <el-tabs v-model="adtiveTab" @tab-click="handleClick">
            <el-tab-pane label="地址管理" name="openAddress">
                <div class="tabContent">
                    <el-row class="layout-1">
                        <el-form :model="openAddress.searchFrom.data" :inline="true">
                            <el-form-item>
                                <el-select clearable v-model="openAddress.searchFrom.data.device" placeholder="应用于">
                                    <el-option label="Android" value="Android"></el-option>
                                    <el-option label="iOS" value="iOS"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select clearable v-model="openAddress.searchFrom.data.state" placeholder="状态">
                                    <el-option label="启用" value="启用"></el-option>
                                    <el-option label="禁用" value="禁用"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model.trim="openAddress.searchFrom.data.keyWords"
                                          placeholder="请输入名称查找"></el-input>
                            </el-form-item>
                            <el-button type="primary" icon="search" @click="searchData">查找</el-button>
                        </el-form>
                    </el-row>
                    <el-row class="layout-2">
                        <el-col :span="15">
                            <el-button icon="plus" @click="handleEdit(2)">新增</el-button>
                            <el-button icon="check" @click="activeItem()">启用</el-button>
                            <el-button icon="warning" @click="disableItem()">禁用</el-button>
                            <el-button icon="close" @click="deleteItem()">删除</el-button>
                        </el-col>
                        <el-col :span="9" class="right">
                            <span class="time">最后发布时间：2017-05-22  12:00:00</span>
                            <el-button type="primary">发布</el-button>
                        </el-col>
                    </el-row>
                    <el-row class="layout-3">
                        <el-table
                                class="table"
                                :data="openAddress.list"
                                ref="multipleTable"
                                highlight-current-row
                                @selection-change="selectionChange"
                                border
                                style="width: 100%"
                        >
                            <el-table-column
                                    type="selection"
                                    fixed
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    show-overflow-tooltip="true"
                                    type="index"
                                    label="ID"
                                    fixed
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    show-overflow-tooltip="true"
                                    prop="title"
                                    label="名称"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    show-overflow-tooltip="true"
                                    prop="device"
                                    label="应用于"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="渠道"
                                    width="100">
                                <template scope="scope">
                                    <i class="el-icon-document" @click="showType(scope.row.type)"></i>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    show-overflow-tooltip="true"
                                    label="状态"
                                    width="180">
                                <template scope="scope">
                                    <i class="el-icon-check stateA" v-show="scope.row.state==1"></i>
                                    <i class="el-icon-warning stateB" v-show="scope.row.state==0"></i>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    show-overflow-tooltip="true"
                                    label="操作"
                                    width="340">
                                <template scope="scope">
                                    <el-button
                                            size="small"
                                            @click="handleEdit(1,scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="small"
                                            @click="disableItem(scope.row)">禁用
                                    </el-button>
                                    <el-button
                                            size="small"
                                            @click="activeItem(scope.row)">启用
                                    </el-button>
                                    <el-button
                                            size="small"
                                            @click="deleteItem(scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    show-overflow-tooltip="true"
                                    prop="updateTime"
                                    label="更新时间"
                                    width="300">
                            </el-table-column>
                            <el-table-column
                                    show-overflow-tooltip="true"
                                    prop="updatePerson"
                                    label="更新人"
                                    min-width="100">
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="layout-4">
                        <el-pagination
                                class="pagination"
                                @size-change="handleSizeChange"
                                :current-page="currentPage4"
                                :page-sizes="[20, 40, 100, 200]"
                                :page-size="20"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="1000">
                        </el-pagination>
                    </el-row>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!--弹窗-->
        <el-dialog :title="dialogData.title" :visible.sync="dialogData.isShow" class="m-adManageDialog" size="small">
            <el-form ref="periodForm" :model="dialogData.data" v-loading=dialogData.loading>
                <el-row class="row">
                    <el-col :span="4" class="label">名称<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data.title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item class="iseffective">
                            <el-switch v-model="dialogData.data.state"></el-switch>
                        </el-form-item>
                        <div class="flag">{{dialogData.data.state ? '开启' : '关闭'}}</div>
                    </el-col>

                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">应用于<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-radio-group v-model="dialogData.data.device">
                                <el-radio :label=0>Android</el-radio>
                                <el-radio :label=1>iOS</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">真实开户地址<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data.realAddress"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">模拟开户地址<span class="isMust">*</span></el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data.simulationAddress"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row" v-if="dialogData.type != 'startPage'">
                    <el-col :span="4" class="label">适用渠道</el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input v-model="dialogData.data.channel" placeholder="多渠道以,号间隔"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList">
                            <el-button type="primary">上传渠道列表</el-button>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">备注</el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-input type="textarea" v-model="dialogData.data.note"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogData.isShow = false">取 消</el-button>
                <el-button type="primary" @click="changeDataList">确 定</el-button>
            </div>
        </el-dialog>

    </el-row>
</template>
<script>
    import axios from "axios";
    import cgi from "conf/cgi";
    export default {
        data(){
            return {
                adtiveTab: "openAddress",
                openAddress: {
                    searchFrom: {
                        data: {
                            device: null,
                            state: null,
                            keyWords: null
                        }
                    },
                    curPage: null,
                    total: 1,
                    list: null,
                    multipleSelection: []
                },
                dialogData: {
                    isShow: false,
                    loading: true,
                    title: '新增',
                    data: {
                        title: null,
                        state: null,
                        device: 0,
                        realAddress: null,
                        simulationAddress: null,
                        channel: null,
                        note: null,
                    }
                }
            }
        },
        methods: {
            selectionChange(currentRow) {
                this.openAddress.multipleSelection = currentRow;
            },
            searchData() {
                this.getTableData();
            },
            showType(data) {
                this.$msgbox({
                    title: '渠道',
                    message: this.$createElement('p', {}, data),
                })
            },
            getTableData() {
                var queryData = {};
                return axios.get(cgi.openAddress)
                    .then(res => {
                        if (res.code == 0) {
                            this.openAddress.list = res.data.list;
                            return res.data;
                        } else {
                            return Promise.reject("请求数据失败!");
                        }
                    }, error => {
                        return Promise.reject(error.msg);
                    });
            },
            changeDataList() {
                this.dialogData.isShow = false;
            },
            /*
             * type 操作类型 1修改  2增加
             * index  操作数据行
             * rowData 操作数据集合
             *
             * */
            handleEdit(type, index, rowData) {

                if (type == 1) {
                    this.dialogData.title = '修改';
                    this.dialogData.loading = true;

                } else if (type == 2) {
                    this.dialogData.title = '新增';
                    this.dialogData.loading = false;
                    for (let item in this.dialogData.data) {
                        this.dialogData.data[item] = null;
                    }
                }
                this.dialogData.isShow = true;
            },
            /*
             * 新增
             * type 数据类型
             * */
            /*
             * 启用数据
             * type 数据类型
             * */
            activeItem(rowData){
                //未传入rowData 点击批量操作
                console.log(this.openAddress.multipleSelection)
                if ((typeof (rowData) == 'undefined') && this.openAddress.multipleSelection.length <= 0) {
                    this.$alert('请先选择要启用的记录！', '温馨提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return;
                }
                this.$confirm('确定要启用吗？', '温馨提示', {})
                    .then(() => {
                        //表格操作传入数据
                        if (typeof (rowData) != 'undefined') {
                            this.$message({
                                type: 'success',
                                message: '启用'
                            })
                        } else {
                            this.$message({
                                type: 'success',
                                message: '启用'
                            })
                        }

                    })
                    .catch(() => {

                    })
            },
            /*
             * 禁用数据
             * type 数据类型
             * */
            disableItem(rowData){
                if ((typeof (rowData) == 'undefined') && this.openAddress.multipleSelection.length <= 0) {
                    this.$alert('请先选择要禁用的记录！', '温馨提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return;
                }
                this.$confirm('确定要禁用吗？', '温馨提示', {})
                    .then(() => {
                        //表格操作传入数据
                        if (typeof (rowData) != 'undefined') {
                            this.$message({
                                type: 'success',
                                message: '禁用'
                            })
                        } else {
                            this.$message({
                                type: 'success',
                                message: '禁用'
                            })
                        }

                    })
                    .catch(() => {

                    })
            },
            /*
             * 删除数据
             * type 数据类型
             * */
            deleteItem(rowData){
                if ((typeof (rowData) == 'undefined') && this.openAddress.multipleSelection.length <= 0) {
                    this.$alert('请先选择要删除的记录！', '温馨提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return;
                }
                this.$confirm('确定要删除吗？', '温馨提示', {})
                    .then(() => {
                        //表格操作传入数据
                        if (typeof (rowData) != 'undefined') {
                            this.$message({
                                type: 'success',
                                message: '删除'
                            })
                        } else {
                            this.$message({
                                type: 'success',
                                message: '删除'
                            })
                        }

                    })
                    .catch(() => {

                    })
            },
        }
    }
</script>
<style lang="scss" type="text/scss" scoped>
    @import "../../../../sprites/_variable";

    .m-adManage {
        margin-top: 15px;
        height: 93%;
        background-color: #fff;
        .layout-1 {
            padding: 15px;
            border-bottom: solid 15px $background-colorA;
        }
        .layout-2 {
            padding: 15px;
            .right {
                text-align: right;
                .time {
                    margin-right: 20px;
                    font-size: 15px;
                }
            }
        }
        .layout-3 {
            padding: 15px;
            .stateA {
                color: $color-success;
            }
            .stateB {
                color: $color-danger;
            }
        }
        .layout-4 {
            padding-left: 15px;
        }
    }

    .m-adManageDialog {
        .row {
            .iseffective {
                display: inline-block;
            }
            .flag {
                display: inline-block;
            }
            .tipmsg {
                background-color: $background-colorA;
                padding: 5px 5px 20px 5px;
            }
        }
        .select {
            width: 100%;
        }
        .label {
            text-align: right;
            padding-right: 10px;
            line-height: 36px;
            .isMust {
                padding-left: 3px;
                color: $color-danger;
            }
        }
    }
</style>